<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script src="../../../js/module/jquery-3.4.1.min.js"></script>
    <script src="../../../public/mui/echarts-all.js"></script>
    <link rel="stylesheet" href="../../../public/dist/css/layui.css">
    <style>
        .chart {
            height: 300px;
        }
        body{
            overflow-x:hidden;
            overflow-y:hidden;
        }
        .p40 {
            padding: 37px;
        }
        .p40>label{
            color: #333;
            font-family: "Comic Sans MS";
            font-size: 2em;
            text-shadow: 1px 1px 0px #212121;
        }
        .layui-form-item{
            display: flex;
            position: absolute;
            margin-left: 200px;
        }
        .layui-form-label{
            width: 100px;
        }
        .layui-input-block{
            margin-left: 10px;
        }
    </style>

</head>
<body>
<form class="layui-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">选择单位</label>
        <div class="layui-input-block">
            <select name="selectunit" lay-verify="required" lay-filter="selectunit" id="selectunit">
                <option value="年">年</option>
                <option value="月">月</option>
                <option value="周">周</option>
                <option value="日">日</option>
            </select>
        </div>
        <label class="layui-form-label">选择年</label>
        <div class="layui-input-block">
            <select name="selectunit" lay-verify="required" lay-filter="selectunit" id="selectunit">
                <option value="2018">2018</option>
                <option value="2017">2017</option>
                <option value="2016">2016</option>
                <option value="2015">2015</option>
            </select>
        </div>
        <div style="display: none;" class="monthshow">
            <label class="layui-form-label">选择月</label>
            <div class="layui-input-block">
                <select name="selectunit" lay-verify="required" lay-filter="selectunit" id="selectunit" style="display: none;">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                </select>
            </div>
        </div>
        
    </div>
</form>
<blockquote class="layui-elem-quote">
    财务基础报表
</blockquote>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs5">
            <div class="layui-card">
                <div class="layui-card-body">
                    <!---->
                    <div class="layui-row">
                        <div class="layui-col-xs6">
                            <div class="grid-demo grid-demo-bg1">
                                <blockquote class="layui-elem-quote p40">
                                    净收入<label id="jsr">18750</label>(万)
                                </blockquote>
                            </div>
                        </div>
                        <div class="layui-col-xs6">
                            <div class="grid-demo">
                                <blockquote class="layui-elem-quote p40">
                                    线上收入<label id="xssr">1500</label>(万)
                                </blockquote>
                            </div>
                        </div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-xs6">
                            <div class="grid-demo grid-demo-bg1">
                                <blockquote class="layui-elem-quote p40">
                                    毛利润<label id="mlr">15000</label>(万)
                                </blockquote>
                            </div>
                        </div>
                        <div class="layui-col-xs6">
                            <div class="grid-demo">
                                <blockquote class="layui-elem-quote p40">
                                    盈利润<label id="ylr">5000</label>(万)
                                </blockquote>
                            </div>
                        </div>
                    </div>
                    <!---->
                </div>
            </div>
        </div>
        <div class="layui-col-md7">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div  style="height: 222px;" id="xsje"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs5">
        <div class="layui-card">
            <div class="layui-card-body">
                <blockquote class="layui-elem-quote">
                    花费(万)
                </blockquote>
                <table class="layui-table" width="200">
                    <colgroup>
                        <col width="100">
                        <col width="100">
                        <col>
                    </colgroup>
                    <tbody>
                    <tr>
                        <td>管理及IT费用</td>
                        <td>500</td>
                    </tr>
                    <tr>
                        <td> 广告费</td>
                        <td>300</td>
                    </tr>
                    <tr>
                        <td> 折旧费</td>
                        <td>100</td>
                    </tr>
                    <tr>
                        <td> 商品税</td>
                        <td>100</td>
                    </tr>
                    <tr>
                        <td> 投资收入</td>
                        <td>300</td>
                    </tr>
                    <tr>
                        <td> 房租</td>
                        <td>1000</td>
                    </tr>
                    <tr>
                        <td> 占用费</td>
                        <td>100</td>
                    </tr>
                    <tr>
                        <td> 其他操作费用</td>
                        <td>100</td>
                    </tr>
                    <tr>
                        <td> 差旅费</td>
                        <td>50</td>
                    </tr>
                    <tr>
                        <td> 交通费用</td>
                        <td>50</td>
                    </tr>
                    <tr>
                        <td> 食补</td>
                        <td>30</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
        <div class="layui-col-md7">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="chart" id="bold"></div>
                <div class="chart" id="hf"></div>
            </div>
        </div>
    </div>
    </div>

    <script src="../../../public/dist/layui.js" charset="utf-8"></script>
<script>
    
    option = {
        title: {
            text: '收益及亏盈',
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c}%"
        },
        toolbox: {
            feature: {
                dataView: {readOnly: false},
                restore: {},
                saveAsImage: {}
            }
        },
        legend: {
            data: ['花费','毛利润','线上收益','净收入','利润']
        },
        calculable: true,
        series: [
            {
                name:'漏斗图',
                type:'funnel',
                left: '10%',
                top: 60,
                bottom: 60,
                width: '80%',
                min: 0,
                max: 100,
                minSize: '0%',
                maxSize: '100%',
                sort: 'descending',
                gap: 2,
                label: {
                    show: true,
                    position: 'inside'
                },
                labelLine: {
                    length: 10,
                    lineStyle: {
                        width: 1,
                        type: 'solid'
                    }
                },
                itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 1
                },
                emphasis: {
                    label: {
                        fontSize: 20
                    }
                },
                data: [
                    {value: 60, name: '花费'},
                    {value: 40, name: '毛利润'},
                    {value: 20, name: '线上收益'},
                    {value: 80, name: '净收入'},
                    {value: 100, name: '利润'}
                ]
            }
        ]
    };
    var barChart = echarts.init(document.getElementById('xsje'));
    barChart.setOption(option);



    sjtjOption = {
        title: {
            text: '收益及亏盈组成(万)',
        },
        tooltip : {
            trigger: 'axis',
            axisPointer : {
                type : 'shadow'
            },
            formatter: function (params) {
                var tar = params[1];
                return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type : 'category',
            splitLine: {show:false},
            data : ['花费','毛利润','线上收益','净收入','利润']

        },
        yAxis: {
            type : 'value'
        },
        series: [
            {
                name: '辅助',
                type: 'bar',
                stack:  '总量',
                itemStyle: {
                    normal: {
                        barBorderColor: 'rgba(0,0,0,0)',
                        color: 'rgba(0,0,0,0)'
                    },
                    emphasis: {
                        barBorderColor: 'rgba(0,0,0,0)',
                        color: 'rgba(0,0,0,0)'
                    }
                },
                data: [0, 1700, 1400, 1200, 300, 0]
            },
            {
                name: '生活费',
                type: 'bar',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'inside'
                    }
                },
                data:[2900, 1200, 300, 200, 900]
            }
        ]
    };

    var barChart = echarts.init(document.getElementById('bold'));
    barChart.setOption(sjtjOption);





    hFoption = {
        title: {
            text: '花费统计(万)',
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c}万"
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type : 'category',
            splitLine: {show:false},
            data :['管理及IT费用	','广告费','折旧费','商品税','投资收入','房租','占用费','其他操作费用','差旅费','交通费用','食补']
        },
        yAxis: {
            type : 'value'
        },
        series: [
            {
                name: '花费统计',
                type: 'bar',
                stack: '总量',
                data: [500,300,100,100,300,1000,100,100,50,50,30]
            }
        ]
    };

    var hf = echarts.init(document.getElementById('hf'));
    hf.setOption(hFoption);




    layui.use(['form', 'layedit', 'laydate'], function() {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;

        form.on('select(selectunit)', function(data) {

            var barChart = echarts.init(document.getElementById('xsje'));
            barChart.setOption(option);

            var barChart = echarts.init(document.getElementById('bold'));
            barChart.setOption(sjtjOption);


            var hf = echarts.init(document.getElementById('hf'));
            hf.setOption(hFoption);
            if(data.value=='年'){
                document.querySelector('.monthshow').style.display='none';
            }else if(data.value=='月'){
                document.querySelector('.monthshow').style.display='none';
            }else if(data.value=='周'){
                document.querySelector('.monthshow').style.display='flex';
            }else if(data.value=='日'){
                document.querySelector('.monthshow').style.display='flex';
            }
        });
    });
</script>
</body>
</html>